<template>
  <div>
    <input
     type="checkbox"
     :checked="item.status === FINISHED"
     @click="setStatus(item.id)"
    >
    <span
     :class="item.status === FINISHED ? 'line-through' : ''"
    >
      {{item.content}}
    </span>
    <button
     @click="removeTodo(item.id)"
    >
      删除
    </button>
    <button
     v-if="item.status !== FINISHED"
     @click="setDoing(item.id)"
     :class="item.status === DOING ? 'doing' : 'willdo'"
    >
      {{item.status === DOING ? '正在做···' : '马上做'}}
    </button>
  </div>
</template>

<script lang="ts">
import { ITodo, TODO_STATUS } from "@/typings";
import { defineComponent, PropType } from "vue";

interface IStatusState {
  DOING: TODO_STATUS.DOING,
  FINISHED: TODO_STATUS.FINISHED,
  WILLDO: TODO_STATUS.WILLDO
}

export default defineComponent({
  name: 'TodoItem',
  props: {
    item: Object as PropType<ITodo>
  },
  setup(props, { emit }) {
    const statusState = <IStatusState>{
      DOING: TODO_STATUS.DOING,
      FINISHED: TODO_STATUS.FINISHED,
      WILLDO: TODO_STATUS.WILLDO
    }

    const removeTodo = (id: number): void => {
      emit('removeTodo', id)
    }

    const setStatus = (id: number): void => {
      emit('setStatus', id)
    }

    const setDoing = (id: number): void => {
      emit('setDoing', id)
    } 

    return {
      ...statusState,
      removeTodo,
      setStatus,
      setDoing
    }
  }
})
</script>

<style scoped>
.line-through {
  text-decoration: line-through;
}
.doing {
  background-color: #9b9b9b;
  color: #fff;
}
.willdo {
  background-color: orange;
  color: #fff;
}
</style>